<template>
  <div class="account">
    <el-form size="mini" :inline="true" :label-position="labelPosition">
      <el-form-item label="账号:">
        <el-input placeholder="请输入账号进行查询"></el-input>
      </el-form-item>
      <el-form-item label="电话:">
        <el-input placeholder="请输入电话进行查询"></el-input>
      </el-form-item>
      <el-form-item label="创建日期:">
        <el-date-picker
        v-model="time"
        type="date"
        placeholder="选择日期">
      </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
        <el-button type="primary" @click="addAccount">新增账号</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格部分 -->
    <zj-table
      v-loading="loading"
      :columns="columns"
      :data="lists"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :total="total"
      :selectable="false"
      height="auto"
      :pagination="true"
    />
    <!-- 弹窗部分 -->
    <el-dialog
      v-el-drag-dialog
      title="添加账号"
      :visible.sync="dialogVisible"
      width="25%"
      center>
      <el-form ref="role" :model="form" :rules="accountRules" size="mini">
        <el-form-item label="账号: " label-width="70px" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="昵称: " label-width="70px" prop="nickName">
          <el-input v-model="form.nickName" placeholder="请输入昵称" />
        </el-form-item>
        <el-form-item label="电话: " label-width="70px" prop="phonenumber">
          <el-input v-model="form.phonenumber" placeholder="请输入电话号码" />
        </el-form-item>
        <el-form-item label="角色: " label-width="70px" prop="roleName">
          <el-select v-model="form.roleName" placeholder="请选择" clearable>
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <updateDialog :show.sync="show" :updaterel="updaterel" />
  </div>
</template>

<script>
import updateDialog from './components/updateDialog.vue'
export default {
  components: {
    updateDialog
  },
  data(){
    return {
      labelPosition: 'left',
      show: false,
      updaterel: {},
      time:'',
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 1,
      form:{},
      dialogVisible: false,
      roleList:[
        {
          id:1,
          roleName: '董事长'
        },{
          id:2,
          roleName: '市场部经理'
        }
      ],
      lists: [
        {
          id: '1',
          userName: '2493827789',
          roleName: '统计员',
          nickName: '吕恣瑞',
          createTime: '2022-09-19',
          createByName: 'admin',
          areaCode: '110000,110101',
          phonenumber: '17503237677',
          statusText: ''
        },
        {
          id: '2',
          userName: '2493827789',
          roleName: '统计员',
          nickName: '吕恣瑞',
          createTime: '2022-09-19',
          createByName: 'admin',
          areaCode: '130000,130500,130503',
          phonenumber: '17503237677',
          statusText: ''
        },
        {
          id: '3',
          userName: '2493827789',
          roleName: '统计员',
          nickName: '吕恣瑞',
          createTime: '2022-09-19',
          createByName: 'admin',
          areaCode: '510000,510100,510104',
          phonenumber: '17503237677',
          statusText: ''
        }
      ],
      columns: Object.freeze([
        {
          label: '账号',
          prop: 'userName',
          align: 'center'
        },
        {
          label: '角色',
          prop: 'roleName',
          align: 'center'
        },
        {
          label: '昵称',
          prop: 'nickName',
          align: 'center'
        },
        {
          label: '创建时间',
          prop: 'createTime',
          align: 'center',
        },
        {
          label: '创建人',
          prop: 'createByName',
          align: 'center'
        },
        {
          label: '电话',
          prop: 'phonenumber',
          align: 'center'
        },
        {
          label: '状态',
          prop: 'statusText',
          align: 'center'
        },
        {
          width: 300,
          label: '操作',
          actions: [
            {
              id: 'change',
              text: '停用',
              type: 'danger',
              disabled: ({ userName }) => userName === 'admin',
              click: this.stop
            },
            {
              id: 'change',
              text: '启用',
              type: 'primary',
              disabled: ({ userName }) => userName === 'admin',
              click: this.start
            },
            {
              id: 'follow',
              text: '编辑',
              type: 'primary',
              disabled: ({ userName }) => userName === 'admin',
              click: this.edit
            },
            {
              id: 'person',
              text: '重置密码',
              type: 'primary',
              click: this.resetpwd
            },
            {
              id: 'delete',
              text: '删除',
              type: 'danger',
              click: this.delete
            }
          ]
        }
      ]),
      accountRules: {
        userName: [
          { required: true, message: '请输入账号' }
        ],
        nickName: [
          { required: true, message: '请输入昵称' }
        ],
        phonenumber: [
          { required: true, message: '请输入电话号码' }
        ],
        roleName: [
          { required: true, message: '请选择角色' }
        ]
      }
    }
  },
  methods:{
    //添加账号
    addAccount(){
      this.dialogVisible = true
    },
    // 停用
    stop() {
      this.$message({
        type: 'warning',
        message: '该功能尚未开发'
      })
    },
    // 启用
    start() {
      this.$message({
        type: 'warning',
        message: '该功能尚未开发'
      })
    },
    // 编辑
    edit(rel) {
      this.updaterel = rel;
      this.show = true;
    },
    // 重置密码
    resetpwd() {
      this.$message({
        type: 'warning',
        message: '该功能尚未开发'
      })
    },
    // 删除
    delete() {
      this.$message({
        type: 'warning',
        message: '该功能尚未开发'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.account{
  .el-select{
    width: 100%;
  }
}
</style>